<template>
    <div class="perfectInfoBox">
      <div class="login">
        <div class="top-logo">
          <h4>
            {{ pageTitle }}
          </h4>
          <h5>
            完善信息
          </h5>
        </div>
        <div class="top-change">
          <van-button
            class="a"
            @click="type = true"
            :type="type ? 'primary' : 'default'"
            style="flex-shrink: 0; border-radius: 6px"
            size="small"
            round
            >访客</van-button
          >
          <van-button
            class="b"
            @click="type = false"
            :type="type ? 'default' : 'primary'"
            style="flex-shrink: 0; border-radius: 6px"
            size="small"
            round
            >校友</van-button
          >
        </div>
        <div class="field-box">
          <div class="user-box">
            <img src="@/assets/login/user.png" alt="">
            <Field
              v-model="state.user"
              :placeholder="
                (store?.state?.lang?.currentLang?.please_enter + store?.state?.lang?.currentLang?.user_name) || '姓名'
              "
              clearable
              autocomplete="off"
            />
          </div>
          <div class="number-box">
            <img src="@/assets/login/info.png" alt="">
            <Field
              v-model="state.number"
              :placeholder="store?.state?.lang?.currentLang?.please_enter + '学号/身份证号'"
              clearable
              autocomplete="off"
            />
          </div>
        </div>
        <div class="tip">
          <h5>温馨提示</h5>
          <p>首次使用需要完善用户信息</p>
          <p>1.先选择要绑定的身份：校友或访客。</p>
          <p>2.填写的信息提交成功后不可再修改。</p>
        </div>
        <div class="btns">
          <van-button
            class="a"
            @click="onReturn"
            icon="revoke"
            style="flex-shrink: 0; border-radius: 6px"
            round
            >返回</van-button
          >
          <van-button
            class="b"
            @click="onSubmit"
            style="flex-shrink: 0; border-radius: 6px"
            type="primary"
            round
            >确认</van-button
          >
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, computed, watch } from "vue";
  import { useStore } from "vuex";
  import { useRouter } from "vue-router";
  import { Toast } from "vant";
  import Field from "@/components/Field.vue";
  const store = useStore();
  const router = useRouter();
  const type = ref(true);
  const state = reactive({
    user: '',
    number: ''
  });
  const pageTitle = computed(() => {
    let lang = store?.state?.lang?.lang;
    let webTitle = store?.state?.config?.config?.web;
    if (lang == "zh") {
      return webTitle?.title;
    } else if (lang == "en") {
      return webTitle?.entitle;
    }
    return "盛卡恩空间系统";
  });

  onMounted(() => {
    store.dispatch("updateLang");
    store.dispatch("updateConfig");
  });
  const onSubmit = () => {
    if (!state.user || !state.number) {
      Toast("请填写完整信息~");
      return false;
    }
    router.push('/home')
  };
  const onReturn = () => {
    router.go();
  }
  </script>
  
  <style lang="scss" scoped>
  .perfectInfoBox {
    width: 100%;
    height: 100vh;
    background-color: var(--bgColor) !important;
    h4 {
      font-size: 18px;
    }
    .login {
      margin: 0 auto;
      box-sizing: border-box;
      padding-bottom: 120px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: auto;
      .top-logo {
        width: 100%;
        height: 273px;
        background: url('@/assets/login/perfect.png') no-repeat;
        background-size: 100% 100%;
        h4 {
          display: flex;
          justify-content: center;
          margin: 24px 0 12px 0;
        }
        h5 {
          font-size: 24px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #FFFFFF;
          line-height: 33px;
          text-align: center;
          margin-top: 131px;
        }
      }
      .top-change {
        margin: 29px 0 10px 22px;
        .a {
          margin-right: 7px;
        }
      }
      .field-box {
        .number-box,
        .user-box {
          margin: 0 22px 10px 22px;
          border-radius: 4px;
          border: 1px solid #E6E6E6;
          display: flex;
          align-items: center;
          padding-right: 9px;
          img {
            width: 16px;
            height: 16px;
            margin: 0 9px 0 12px;
          }
        }
      }
      .tip {
        margin: 0 22px;
        padding-bottom: 92px;
        h5 {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #E58100;
          padding-top: 15px;
        }
        p {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #676767;
          line-height: 17px;
        }
      }
      .btns {
        display: flex;
        margin: 0 22px;
        .a {
          flex: 0.4;
          margin-right: 7px;
        }
        .b {
          flex: 0.6;
          margin-left: 7px;
        }
      }
    }
  }
  </style>
  